<template>
    <div class="login">
        <div class="container">
            <h3 >骨科信息管理系统</h3>
            <el-form ref="ruleFormRef" class="login-form":model="ruleForm" :rules="rules" :label-position="'left'" label-width="100px"
                style="max-width: 460px">
                <el-form-item label="账号:" prop="userName">
                    <el-input v-model="ruleForm.userName" />
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input v-model="ruleForm.password" />
                </el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules,ElMessage  } from 'element-plus'
import { login } from "../axios/http"
import { useRouter } from "vue-router";
import openMessage from '../utils/message';
const ruleForm = reactive({
    userName: '',
    password: '',
})

interface RuleForm {
    userName: string
    password: string
}


const router = useRouter();
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {


            const { userName, password } = ruleForm
            console.log(userName, password)
            const res = await login(ruleForm)
            if (res?.code === '0000') {
                openMessage('success', '登录成功'); 
                router.push({ path: "/index" })
            } else {
                openMessage('error', '登录失败'); 
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>



<style scoped>
.login {
    width:100%;
    height:100%;
    position:reactive;
    .container{
        width:400px;
        position:absolute;
        left:50%;
        top:40%;
        transform:translateX(-50%);
        h3{
            text-align:center;
        }
        .login-form{
            text-align:center;
        }
    }
}

</style>
